<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="left">意见反馈</div>
                    </div>
                    <div class="feedback">
                        <el-form ref="form" status-icon :show-message="false" :model="form" label-width="150px" label-position="left">
                            <el-form-item label="选择类型：" prop="type" required>
                                <el-select v-model="form.type" placeholder="请选择反馈类型" style="width:5rem">
                                    <el-option :label="item" :value="item" v-for="(item, index) in feedbackType" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="意见反馈：" required prop="content">
                                <el-input 
                                    show-word-limit
                                    type="textarea" 
                                    v-model="form.content"
                                    placeholder="请填写您的意见与建议"
                                    maxlength="200"
                                    :rows="8"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item class="margin-top30">
                                <el-button class="btn-main" @click="AddFeedback" :loading="addLoading">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/feedback";
export default {
    data() {
        return {
            form: {
                type: "",
                content: ""
            },
            feedbackType: [],
            addLoading: false
        };
    },
    methods: {
        // 新增意见反馈
        AddFeedback: function () {
            var _this = this;
            _this.$refs.form.validate((valid) => {
                if (valid) {
                    _this.$confirm(`是否提交意见反馈`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.addLoading = true;
                        api.AddFeedbackType(_this.form)
                            .then((res) => {
                                _this.$message.success("提交成功");
                                _this.addLoading = false;
                                _this.$refs.form.resetFields();
                            }).catch((err) => {
                                _this.addLoading = false;
                            })
                    })
                }
            })
        },
        // 加载意见反馈类型
        LoadFeedbackType: function () {
            api.GetFeedbackType()
                .then((res) => {
                    this.feedbackType = res.data;
                })
        }
    },
    mounted: function(){
        this.LoadFeedbackType();
    }
};
</script>